<template>
  <div id="wastehistogram"></div>
</template>
<script setup>
import * as echarts from "echarts";
import resize from "../../../../mixin/resize.js";
import { getCurrentInstance } from "vue";
let myChart = shallowRef(null);
let num = 10;
let props = defineProps(["wasteData"]);
let x = ref([]);
let y = ref([]);

onMounted(() => {
  myChart.value = echarts.init(document.getElementById("wastehistogram"));
  getServerData();
});

let getServerData = () => {
  myChart.value.setOption({
    color: ["#0874FA"],
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      formatter: function (params) {
        var relVal = params[0].name + "<br/>";
        relVal += params[0].seriesName + ":" + params[0].value + "吨";
        // relVal +=
        //   params[1].seriesName + ":" + Math.abs(params[1].value) + "元" + "<br/>";
        // relVal +=
        //   params[2].seriesName + ":" + Math.abs(params[2].value) + "元" + "<br/>";
        return relVal; //负数取绝对值变正数
      },
      // formatter: function (params) {
      //   var relVal = params[0].name + "<br/>";
      //   relVal += params[0].seriesName + ":" + params[0].value + "吨";
      //   // relVal +=
      //   //   params[1].seriesName + ":" + Math.abs(params[1].value) + "元" + "<br/>";
      //   // relVal +=
      //   //   params[2].seriesName + ":" + Math.abs(params[2].value) + "元" + "<br/>";
      //   return relVal; //负数取绝对值变正数
      // },
    },
    grid: {
      top: "19%",
      bottom: "18%",
      left: "8%",
      right: "4%",
    },
    toolbox: {
      right: "4%",
      itemSize: 18,
      feature: {
        dataView: {
          show: true, // 是否显示工具
          title: "数据视图",
        },
        magicType: {
          title: "图表类型切换",
          type: ["line", "bar"], //图表类型切换
        },
        icon: "circle",

        saveAsImage: {
          show: true,
          title: "保持图片",
        },
      },
    },
    legend: {
      data: [],
      right: "110%", //组件离容器左侧的距离，可以是left,center,right，也可以是像素px和百分比10%
      bottom: "110px",
    },
    dataZoom: [
      {
        type: "inside", //无滑动条内置缩放   type: 'slider', //缩放滑动条
        filterMode: "filter",
        xAxisIndex: [0], //X轴滑动
        start: 1,
        end: 100,
      },
    ],
    xAxis: {
      axisTick: {
        show: false, //是否显示刻度线
      },
      axisLabel: {
        show: true,
        color: "#666",
        fontSize: 18,
        type: "solid",
      },
      axisLine: {
        lineStyle: {
          show: true,
          color: "#ccc", // 坐标轴线线的颜色
          width: 2, // 坐标轴线线宽
          type: "solid", // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
        },
      },
      data: x.value,
    },

    yAxis: [
      {
        // nameGap: 115, // 坐标轴名称与轴线之间的距离
        show: true,
        type: "value",
        name: "(吨)",
        fontSize: 19,
        nameTextStyle: {
          color: "#666",
          fontSize: 19,
          padding: [0, 10, 10, -50],
        },
        axisLabel: {
          color: "#666",
          fontSize: 18,
        },

        axisLine: {
          show: true, // 是否显示坐标轴轴线
          // symbol: ['none', 'arrow'],     // 轴线两端箭头，两个值，none表示没有箭头，arrow表示有箭头
          // symbolSize: [10, 15],     // 轴线两端箭头大小，数值一表示宽度，数值二表示高度
          lineStyle: {
            color: "#ccc", // 坐标轴线线的颜色
            width: "2", // 坐标轴线线宽
            type: "solid", // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
          },
        },
      },
    ],
    series: [
      {
        name: "废物产生量",
        type: "bar",
        stack: "总量",
        yAxisIndex: 0,
        data: y.value,
      },
    ],
  });
  resize(myChart.value);
};
watch(
  () => props.wasteData,
  () => {
    // console.log(props.wasteData, "fsd");
    x.value = props.wasteData.x || [];
    y.value = props.wasteData.y || [];

    getServerData();
  },
  {
    deep: true,
  }
);
</script>
<style lang="scss" scoped>
#wastehistogram {
  width: 100%;
  margin-top: 2vh;
  height: calc(36vh - 32px);
}
</style>
